<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes,
  watchEffect,
  watch
} from 'vue'
import { ElRadioGroup, ElRadio } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oRadioSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  options: {
    type: Array<string | number>
  },
  field: {
    type: String,
    default: 'label'
  },
  returnField: {
    type: String,
    default: 'value'
  },
  ...IgnoreProps
}
export const oRadioProps = {
  ...ElRadio.props,
  ...oRadioSelfProps
}
export type oRadioPropsType = ExtractPropTypes<typeof oRadioProps>
const oRadio = defineComponent({
  name: 'one-radio',
  props: oRadioProps,
  components: { ElRadioGroup, ElRadio },
  setup(props: oRadioPropsType, context) {
    const inProps = omitSelfProps<oRadioPropsType, typeof oRadioSelfProps>(
      props,
      oRadioSelfProps
    )
    return () => (
      <ElRadioGroup
        {...inProps}
        class={oRadio.name}
        v-model={props.formData![props.prop!]}
        v-slots={context.slots}
      >
        {props.options!.map((item: SimpleKeyArrayObject) => {
          return (
            <ElRadio
              key={item[props.field]}
              label={item[props.field]}
              disabled={!!item.disabled}
            ></ElRadio>
          )
        })}
      </ElRadioGroup>
    )
  }
})
export default oRadio
</script>
<style lang="scss" scoped></style>
